<template>
	<view>
		<view>
			<u-tabs-swiper ref="uTabs" :list="tabList" :current="current" @change="tabsChange" :is-scroll="false"
			 swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="swiper">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<view class="">
						<u-gap height="16" bg-color="#F2F2F2"></u-gap>
							<equipment-fail :deviceInfoSelected='deviceInfoSelected' @click="goPath" @report="report"></equipment-fail>
					</view>
				</scroll-view>
				
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<view class="sheetList" v-for="(item,index) in list " :key="index">
							<u-gap height="16" bg-color="#F2F2F2"></u-gap>
							<sheet-item :sheetItem="item" ></sheet-item>
					</view>
				</scroll-view>
				
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import equipmentFail from './components/equipment-fail.vue'
	import sheetItem from './components/sheet-item.vue';
	import listItem from "../reportRepair/components/list-item.vue"
	export default {
		components:{
			sheetItem,
			listItem,
			equipmentFail
		},
		data() {
			return {
				tabList:[{name:'设备故障'},{name:'我的工单'}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				list:[
					{
						id:'007',
						address:"深圳福田区梅林街道",
						device:'设备123456',
						ip:'55-12-34-64-87-76',
						badReason:'接触不良',
						repairName:'李工',
						repairTime:'2021-06-01 18:21:00',
						status:1
					},
					{
						id:'008',
						address:"深圳福田区梅林街道",
						ip:'55-12-34-64-87-76',
						device:'设备123456',
						badReason:'接触不良',
						repairName:'李工',
						repairTime:'2021-06-01 18:21:00',
						status:2
					},
					
				],
				deviceInfoSelected: {
					label: '',
					ip: '',
					id: ''
				},
			};
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				// this.current = index
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				
			},
			toWorkDetail(){
				// this.$u.route('/pages/mine/workSheetDetail/index')
			},
			// 更新
			updateConfig(item){
				console.log(item)
				this.deviceInfoSelected = {
					label: item.name,
					ip: item.ip,
					id:item.content,
					carCode:item.carCode
				};
			},
			goPath(){
				this.$u.route('/pages/deviceList/deviceList');
			},
			report(e){
				console.log(e)
				uni.showToast({
					title:'点击了提交',
					icon:'none'
				})
			}
		}
	};
</script>

<style scoped>
	.swiper{
		height: calc(100vh - 120rpx);
		background-color: #F2F2F2;
	}
</style>